<template>
	<view>
		<p-navbar  title="互转">
			<view class="jl" @tap="record()">
				互转记录
			</view>
		</p-navbar>
		<view class="container">
			<view class="title">
				币种：USDT
			</view>
			<view class="input-item" v-for="(item,index) in inpList" :key="index">
				<view class="url-text flex align-items justify-between">
					{{item.name}}
					<text v-if="item.name=='数量'" class="keyong">可用数量：{{util.decimal(userinfo.myMoney.balance)}}</text>
				</view>
				<view class="inp flex align-items justify-between">
					<input :style="item.name=='账号'&&'width: 100%;'" type="text" value="" :placeholder="item.tishi" :maxlength="item.len"
					 v-model="form[item.key]" />
					<view v-if="item.name=='数量'" class="keyong">
						USDT <text style="margin: 0 10rpx;">|</text> <text style="color: #FFB740;" @tap="sell(item.key)"> 全部</text>
					</view>
				</view>
			</view>
			<view class="submit">
				<u-button type="primary" ripple :loading="loading" shape="circle" @click="shows=true">确 认</u-button>
			</view>
			<!-- 安全密码输入 -->
			<u-popup v-model="shows" mode="bottom" class="popup">
				<view class="pop">
					安全支付
				</view>
				<view class="form" style="padding: 0 20rpx;">
					<view class="item" v-for="(item,index) in prson" :key="index" style="border-bottom:2rpx solid #E6E6E6;padding-top: 20rpx;">
						<view class="label">{{ item.label }}</view><!-- 标题 -->
						<view class="content">
							<input class="input" :placeholder="item.msg" :maxlength="item.len" :type="item.type" v-model="form[item.key]"
							 @keyup.enter="fnRegister" />
							<view class="password" :class="{ show: showPsw }" @tap="fnPsw(index)"></view>
						</view>
					</view>
				</view>
				<view class="submit">
					<u-button type="primary" ripple shape="circle" :loading="loading" @click="fnRegister">确 定</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inpList: [{
						name: "账号",
						tishi: "请输入资金账户",
						len: 40,
						key: 'targetUserName'
					},
					{
						name: "数量",
						tishi: "请输入数量",
						len: 20,
						key: 'amount'
					}
				],
				loading: false,
				shows: false,
				showPsw: false,
				form: {},
				prson: [{
					key: 'securityPassword',
					label: '安全密码',
					msg: '请设置您的安全密码',
					icon: 'password',
					type: 'password',
					len: 20
				}],
			}
		},
		computed:{
			userinfo(){
				return this.$state.userinfo
			},
		},
		onLoad() {
			
		},
		methods: {
			sell(item){
				this.$set(this.form,item,this.util.decimal(this.userinfo.myMoney.balance))
			},
			record(){//
				this.$Router.push({ path: '/pages/user/record',query:{type:JSON.stringify(3)}})
			},
			edits(){//判断值不能为空
				if(!this.form.securityPassword || !this.form.targetUserName || !this.form.amount){
					this.util.toast('请完善信息')
					return false
				}else if(this.form.amount<0){
					this.util.toast('数量不正确')
					return false
				}
				return true;
			},
			fnRegister() {
				this.loading = true
				this.request('vip/transfer',
					{
						...this.form
					}).then(res => {
					if (res.data.code == 1) {
						this.$store.dispatch('getUser') //获取用户本地资产
						this.util.toast('购买成功','success')
						this.form={}
						this.shows=false
					}
					this.loading = false
				})
			},
			fnPsw(i) { //密码隐藏显示
				this.showPsw = !this.showPsw;
				const type = this.prson[i].type
				this.$set(this.prson[i], 'type', type === 'password' ? 'text' : 'password')
			},
		}
	}
</script>

<style lang="scss">
	.jl{
		color: $color-fu;
	}
	.container {
		padding: 0 36rpx;
		box-sizing: border-box;

		.title {
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: 400;
			color: #333;
			margin: 40rpx 0;
		}

		.input-item {
			border-bottom: 1px solid rgba(22, 119, 255, 0.05);
			margin-top: 40rpx;

			.url-text {
				font-size: 36rpx;
			}

			.keyong {
				font-size: 24rpx;
				font-weight: 400;
				color: #333;
			}

			input {
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 400;
				height: 64rpx;
			}
		}

		.submit {
			margin: 40rpx 0rpx 20rpx;

			/deep/ .u-btn {
				background-color: $light-color !important;
				transition: .3s;
				height: 90rpx;
				width: 650rpx;
				border-radius: 20rpx;
				font-size: 30rpx;
			}

			/deep/ .u-round-circle::after {
				border-radius: 20rpx;
			}
		}

		.pop {
			// width: 100%;

			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			// padding: 0rpx 30rpx 0rpx 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid $border;
			text-align: center;
			// color: #ffffff;

			text {
				float: right;
				padding-right: 40rpx;
				font-size: 24rpx;
				color: #999999;
				// padding-left: 20%;
			}
		}

		.form {
			padding: 0 40rpx;
			// background: #FFFFFF;
			background-color: $color-bgs !important;
			border-radius: 12rpx;
			margin: 0rpx 0rpx;
		}

		.item {
			padding-top: 40rpx;

			.content {
				@include flex;
			}

			.label {

				font-family: PingFang;
				font-weight: bold;
				// color: #FFFFFF;
				height: 40rpx;
				font-size: 28rpx;

				background-size: 36rpx 40rpx;
				background-position: 0 center;
				background-repeat: no-repeat;
				// line-height: 40rpx;
			}

			.input {
				// color: #FFFFFF;
				font-size: 26rpx;
				height: 100rpx;
				padding: 0 30rpx 0 0rpx;
				flex: 1;
				background: none;
				border: none;
				outline: none;
			}

			.password {
				width: 32rpx;
				height: 30rpx;
				@include background;
				margin-right: 50rpx;
				@include click;
				background-image: url(../../static/user/login-psw-hide.png);
				background-size: 100%;
				margin-top: 5rpx;

				&.show {
					color: red;
					background-image: url(../../static/user/login-psw-show.png);
					// @include background;
				}
			}

			.code {
				padding: 0rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				line-height: 50rpx;
				color: $light-color;
				margin-right: 30rpx;
				@include click;
			}
		}
	}

	.popup {
		/deep/ .u-drawer-bottom {
			bottom: 0;
			left: 0;
			right: 0;
			background-color: $color-bgs !important;
		}
	}
</style>
